<template>
  <div>
    <h1>{{art.t}}</h1>
    <div class="info">
      <span>作者:{{art.userAccount}}</span>
      <span>发布时间:{{art.date}}</span>
    </div>
    <div class="main" v-html="art.text">
      
    </div>
    <div class="comment">
      <h3>评论:</h3>
      <el-input
        placeholder="优质的评论可以帮助作者获得更高的权重"
        v-model="comment"
      >
        <el-button slot="append" icon="el-icon-edit-outline" @click="submitComment">评论</el-button>
      </el-input>
      <div class="commentlist">
       <ul>
         <li v-for=" i in commentlist" :key="i._id"><span class="user">{{i.user}}:</span>{{i.text}}<span class="date">评论日期：{{i.date}}</span></li>
       </ul>
      </div>
    </div>
  </div>
</template>

<script>
let formatDate = function (date) {
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  return y + "-" + m + "-" + d;
};
import qs from 'qs'
export default {
  data() {
    return {
      comment: "",
      art:{},
      commentlist:[]
    };
  },
  methods:{
    submitComment(){
      this.$request({
        url:'/artical/comment',
        method:'post',
        data:qs.stringify({
          articalId:this.$route.params.id,
          date:formatDate(new Date()),
          text:this.comment
        })
      }).then(success=>{
        this.commentlist.push(success.data)
        this.comment=''
        })
    }
  },
  mounted(){
    let artID=this.$route.params.id.split('WOWO')[0]
    this.$request({
      url:'/artical/getOne',
      method:'post',
      data:qs.stringify({
        id:artID,
        
      })
    }).then(success=>{
      this.art=success.data
    })

    this.$request({
      url:'/artical/getComment',
      method:'post',
      data:qs.stringify({
        id:this.$route.params.id
      })
    }).then(success=>{
        this.commentlist=success.data
      })
  }
};
</script>

<style scoped>
.info {
  padding: 0 20px;
  height: 50px;
  background-color: #f4f4f4;
  color: #999aaa;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.info span {
  margin-right: 20px;
  line-height: 50px;
}
.main {
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #f4f4f4;
  border-radius: 4px;
  color: #4d4d4d;
  font-size: 16px;
  line-height: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
h3{
  margin: 10px 0;
}
.comment{
  margin: 20px 0;
}
.commentlist{
  margin-top: 20px;
  background-color: #f4f4f4;
  overflow: hidden;
  border-radius: 12px;
}
.commentlist ul li{
  position: relative;
  margin: 10px;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  background-color: #ffff;
  border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.date{
  position: absolute;
  right: 10px;
  color:#999aaa;
  font-size: 12px;
}
.user{
  font-size: 16px;
  color: #555666;
}
</style>